<template>
  <div class="exchange">
     <div id="intergral">
        <div id="main">
            <div id="signin">
                <div id="txtsign">
                    <span id="username"></span><br>
                    <button id="btn" class="fa fa-location-arrow" @click='addintegral()' v-if='integralshow'>签到</button>
                    <button id="btn" class="fa fa-location-arrow"  v-if='!integralshow'>已签到</button>
                    <span id="inter">已获得<i id="numinter">{{localintegral}}</i>积分</span>
                </div>
            </div>
            <div class="jf_levelrule_w">
                <div class="jf_subtabs1">
                    <strong id="shop" @click='integralshop()'>积分商店</strong>
                    <strong id="rule" @click="exchangeshop()">兑换记录</strong>
                </div>
                <div class="jf_shop" v-if="intergralshopshow">
                    <div class="jjg_goods_mainlist">
                        <div class="clearfix jjg_goods_mainlist_w">
                            <div class="jjg_goods_mainlist_item br0" v-for='(val,key) in shopinformation'>
                                <a href="#" class="img">
                                    <img :src="getshopPic(shopinformation[key].shopPic)">
                                </a>
                                <a href="#" class="t">{{shopinformation[key].shopName}}</a>
                                <strong class="price">{{shopinformation[key].getintegral}}积分</strong>
                                <span class="xl">月销量：{{shopinformation[key].monthSell}}份</span>
                                <button class="exbtn" @click='wantexchange(key)'>兑换</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="jf_exchange" v-if='exchangeshopshow'>
                    <div id="exchangeConnect">
                        <div class="exchangelist" v-for='(val,key) in userinformation'>
                            <img :src="getshopPic(val.shopPic)">
                            <table>
                                <tr>
                                    <td>
                                        <h4>商品名称</h4>
                                    </td>
                                    <td>
                                        <h4>兑换时间</h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{userinformation[key].shopName}}</td>
                                    <td>{{userinformation[key].exchangeTime}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
    //  inject:['reload'],   //实现数据库变化时的实时更新（注入）  
    data(){
        return{
            intergralshopshow:true,
            exchangeshopshow:false,
            integralshow:true,
            localintegral:'',
            shopinformation:[],
            userinformation:[]
        }
    },
    created(){
        // 积分数查看接口调用
        this.$axios.get('http://localhost:3000/users/personal')
    .then(res => {
        this.localintegral=res.data.data[0].integral
    })
    .catch(err => {
      console.log('错误信息：',err)
    })
    // 查看商店兑换内容
     this.$axios.get('http://localhost:3000/shop')
    .then(res => {
        this.shopinformation=res.data.data
        // console.log(res.data.data)
        // console.log(res.data.data[0].shopPic) 
    })
    .catch(err => {
      console.log('错误信息：',err)
    })

    //用户查看积分兑换记录
    this.$axios.get('http://localhost:3000/shop/personalexchangge')
    .then(res => {
        this.userinformation=res.data.data
        console.log(res.data.data)
    })
    .catch(err => {
      console.log('错误信息：',err)
    })
    },
  methods:{
      getshopPic(shopPic){
          return require('../assets/images/' +shopPic)
      },
    //   增加积分数
      addintegral:function(){
          this.integralshow=false
        //   let self=this;    //1.1实现数据库变化时的实时更新（调用）
        this.localintegral+=2;
          this.$axios.post('http://localhost:3000/users/integral')
          .then(res=>{
            alert('签到成功！')
            // self.reload()   //1.2实现数据库变化时的实时更新（调用）
             
          })
          .catch(err=>{
            console.log("错误信息是", err)
          })
      },
    // 兑换按钮
    wantexchange:function(index){
        let self = this
        console.log(index)
        this.$axios.post('http://localhost:3000/users/subintegral',{shopId:index+1})
        .then(res=>{
            if(res.data.msg=='积分数不够，不可以兑换!'){
                alert('积分数不够，不可以兑换!')
            }else if(res.data.msg=='增加兑换记录数据库失败！'){
                alert('增加兑换记录数据库失败！')
            }else if(res.data.msg=='增加兑换记录成功！'){
                alert('兑换成功！')
                self.reload()
            }
            console.log(res)
          })
          .catch(err=>{
            console.log("错误信息是", err)
          })
    },
    //   兑换商品
      integralshop:function(){
          this.intergralshopshow=true
          this.exchangeshopshow=false
      },
      exchangeshop:function(){
          this.exchangeshopshow=true
          this.intergralshopshow=false
      }
  }
}

</script>
<style lang="css" scoped>
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none
}

html,
body {
    height: 100%;
}
#main{
    width: 80%;
    margin: 0 auto;
    min-width: 1200px;
    position: absolute;
    left: 250px;
}
#main #signin{
    float: left;
    margin-top: 10px;
    left: 40%;
}
#main #signin img{
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
#main #signin #txtsign{
    float: left;
    width: 300px;
    margin-top: 20px;
}
#main #signin #txtsign #username{
    font-size: 16px;
    font-weight: bolder;
    margin:0 20px;
}
#main #signin #txtsign #btn{
    margin:20px 10px;
    width: 80px;
    height: 30px;
    background: linear-gradient(rgb(160, 191, 124), rgb(101, 147, 74));
    border: 1px solid rgb(160, 190, 117);
}
#main #signin #txtsign #days,
#main #signin #txtsign #inter{
    font-size: 14px;
}
#main #signin #txtsign #days #numday,
#main #signin #txtsign #inter #numinter{
    font-weight: bolder;
    color: red
}
.jf_levelrule_w {
    /* background: linear-gradient(45deg, rgb(160, 191, 124), rgb(255, 255, 255)) fixed; */
    background-color: rgb(237, 243, 229);
    padding:10px 10%;
    width: 80%;
    float: left;
}
strong{
    margin: 10px 20px;
    cursor: pointer;
}
.jjg_goods_mainlist {
    width: 718px;
    margin-top: 20px;
    background: #fff;
    padding-bottom: 20px;
}
.jjg_goods_mainlist_px {
    height: 50px;
    background: #fafafa;
    color: #666;
    font-size: 14px;
    padding-left: 20px;
    padding-top: 10px;
}

.jjg_goods_mainlist_px a.new {
    padding-right: 30px;
    /* background: url(../images/jjg_px_arrows.gif) right 0px no-repeat; */
}

.jjg_goods_mainlist_px a {
    display: inline-block;
    vertical-align: top;
    *display: inline;
    *zoom: 1;
    padding: 0px 15px;
    color: #999;
    height: 40px;
    line-height: 40px;
}

.jjg_goods_mainlist_px {
    height: 50px;
    background: #fafafa;
    color: #666;
    font-size: 14px;
    padding-left: 20px;
    padding-top: 10px;
}

.jjg_goods_mainlist_w {
    width: 718px;
    margin-bottom: 20px;
}

.jjg_goods_mainlist_item {
    width: 238px;
    border-right: 1px solid #fafafa;
    border-bottom: 1px solid #fafafa;
    height: 360px;
    float: left;
    background-color: white;  /*   */
}

.jjg_goods_mainlist_item a.img img {
    display: block;
    height: 198px;
    width: 198px;
}

.jjg_goods_mainlist_item a.t {
    height: 36px;
    line-height: 18px;
    color: #333;
    padding: 8px 20px 0px;
    display: block;
}

.jjg_goods_mainlist_item strong.price {
    line-height: 36px;
    height: 38px;
    display: block;
    font-size: 14px;
    color: #ff3232;
    font-weight: bold;
    padding: 0px 20px;
}

.jjg_goods_mainlist_item span.xl {
    padding: 0px 20px;
    line-height: 14px;
    font-size: 12px;
    color: #999;
}

.jjg_goods_mainlist_item button{
    width: 50px;
    height: 25px;
    background: linear-gradient(rgb(160, 191, 124), rgb(101, 147, 74));
    border: 1px solid rgb(160, 190, 117);
}

#exchangeConnect{
    float: left;
    width: 718px;
    margin-top: 20px;
    background: #fff;
}
.exchangelist{
    width: 100%;
    border: 1px solid #fafafa;
    float: left;
}
.exchangelist img{
    height: 20%;
    width: 198px;
    float: left;
}
.exchangelist table{
    width: 70%;
    margin-top: 50px;
    text-align: center;
}

</style>
